import React from 'react';

import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import { Layout, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import logo from '../assets/logo.jpeg'

var { Header } = Layout;

function Index(props) {


    //使用useNavigate()获取 导航对象
    var navigate = useNavigate();
    var location = useLocation()
    var userinfo = localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : {}
 
   
    const items = [
        { label: '首页', key: '/index/home' }, // 菜单项务必填写 key
        { label: '服务中心', key: '/index/service' }, // 菜单项务必填写 key
        { label: '员工中心', key: '/index/staff' }, // 菜单项务必填写 key
        { label: '客户管理', key: '/index/custom' }, // 菜单项务必填写 key
        { label: '系统管理', key: '/index/system' }, // 菜单项务必填写 key
    ];
    return (
        <div className='index'>
            <Layout>
                <Header className="header">
                    <div className='left'>
                        <div className="logo">
                            <img src={logo} />三棵树客服中心
                        </div>
                        <Menu
                            mode="horizontal"
                            onClick={({ key }) => { navigate(key) }}
                            items={items}
                            style={{ minWidth: 100, flex: "auto" }}
                            defaultSelectedKeys={[location.pathname]}>
                        </Menu>
                    </div>

                    <div className='right'>
                        客服工作台
                        <div className="box"><UserOutlined></UserOutlined></div>
                    </div>
                </Header>
                <Layout>

                    <Outlet></Outlet>

                </Layout>
            </Layout>
        </div>
    );
}

export default Index;